<template>
  <div>
    <h3 class="hotSearch">热门搜索</h3>
    <router-link tag="div" :to="{
      path:'/NewDetails',
      query:{articleId:item.articleId}
    }" class="hotNewList" v-for="(item,index) in search()" :key="index" v-show="index<10">
      <div class="hotNew" >
        <div class="number" :class="index<3?'red':''" >&nbsp;{{index+1}}</div>
        <div class="hot"  >
          {{item.title}}
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
import {getHotNewList} from "@/api/index-api";

export default {
  name: "HotNewList",
  data(){
    return{
      // hotNewList:Array,
      hotNewList:[],
      num:String,
      ishow:true,
    }
  },
  props:{
    ser:String,
  },
  methods:{
    search(){
      console.log(this.ser)
      return this.hotNewList.filter(item=>item.content.includes(this.ser))
    },
    getHotNewList(){
      // getHotNewList().then(({code,rows})=>{
      //   // console.log(code);
      //   console.log(rows);
      //   if(code === 0){
      //     this.hotNewList = rows;
      //     console.log(this.hotNewList)
      //   }
      // })
    }
  },
  created(){
    getHotNewList().then(({code,rows})=>{
      // console.log(code);
      console.log(rows);
      if(code === 0){
        this.hotNewList = rows;
        console.log(this.hotNewList)
      }
    })

  }
}
</script>

<style scoped lang="less">
.hotNewList{
  display:flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  //border:1px solid red;
}
.hotSearch{
  //border:1px solid blue;
  margin-top:5px;
  margin-bottom:5px;
  margin-left:5px;
}
.hot{
  //border:1px solid black;
  font-size:14px;
}
.red{color:red;}
.hotNew{
  display:flex;
  justify-content: flex-start;
  align-content: center;
  flex-wrap: nowrap;
  margin-bottom:5px;
  border-bottom:1px solid #ddd;
}
.number{
  width:8%;
  //border:1px solid blue;
  //display:flex;
  //margin:auto;
  text-align:center;
}
.hot{
  width:85%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size:14px;
  color:#333;
}
</style>